„React Server Component“ laipsniškas tobulinimas: sklandus „JavaScript“ funkcionalumo mažinimas atspariam žiniatinkliui

Vis labiau susietame, tačiau įvairiame skaitmeniniame pasaulyje, žiniatinklis pasiekiamas per stulbinančią įrenginių įvairovę, esant labai skirtingoms tinklo sąlygoms, o jį naudoja vartotojai, turintys platų gebėjimų ir pageidavimų spektrą. Kurti programas, kurios užtikrina nuosekliai aukštos kokybės patirtį visiems ir visur, yra ne tik geriausia praktika; tai yra būtinybė siekiant pasaulinio pasiekiamumo ir sėkmės. Šis išsamus vadovas gilinasi į tai, kaip „React“ serverio komponentai (RSC) – esminis „React“ ekosistemos pasiekimas – gali būti panaudoti siekiant palaikyti laipsniško tobulinimo ir sklandaus „JavaScript“ funkcionalumo mažinimo principus, sukuriant tvirtesnį, našesnį ir visuotinai prieinamą žiniatinkį.

Dešimtmečius žiniatinklio kūrėjai grūmėsi su kompromisais tarp turtingo interaktyvumo ir pagrindinio prieinamumo. Vieno puslapio programų (SPA) iškilimas atnešė neprilygstamą dinamišką vartotojo patirtį, tačiau dažnai tai buvo pasiekta pradinio įkėlimo laiko, priklausomybės nuo kliento pusės „JavaScript“ ir bazinės patirties, kuri žlugdavo be visiškai veikiančio „JavaScript“ variklio, sąskaita. „React“ serverio komponentai siūlo įtikinamą paradigmos pasikeitimą, leidžiantį kūrėjams „perkelti“ atvaizdavimą ir duomenų gavimą atgal į serverį, tuo pačiu išlaikant galingą komponentų modelį, kuriuo garsėja „React“. Šis pusiausvyros atkūrimas veikia kaip galingas įrankis tikrai laipsniškam tobulinimui, užtikrinant, kad pagrindinis jūsų programos turinys ir funkcionalumas visada būtų pasiekiami, nepriklausomai nuo kliento pusės galimybių.

Besikeičiantis žiniatinklio peizažas ir atsparumo poreikis

Pasaulinė žiniatinklio ekosistema yra kontrastų gobelenas. Pagalvokite apie vartotoją judriame didmiestyje su šviesolaidiniu ryšiu ir moderniausiu išmaniuoju telefonu, palyginti su vartotoju atokiame kaime, kuris internetą pasiekia per netolygų mobilųjį ryšį senesnio paprasto telefono naršyklėje. Abu nusipelno naudoti tinkamos patirties. Tradicinis kliento pusės atvaizdavimas (CSR) dažnai stringa pastaruoju atveju, sukeldamas tuščius ekranus, neveikiantį interaktyvumą ar erzinančiai lėtus įkėlimus.

Iššūkiai, kylantys dėl grynai kliento pusės požiūrio, apima:

• Našumo kliūtys: Dideli „JavaScript“ paketai gali žymiai atidėti laiką iki interaktyvumo (TTI), paveikdami pagrindinius žiniatinklio rodiklius (Core Web Vitals) ir vartotojų įsitraukimą.
• Prieinamumo barjerai: Vartotojai, naudojantys pagalbines technologijas arba tie, kurie nori naršyti išjungę „JavaScript“ (dėl saugumo, našumo ar asmeninių pageidavimų), gali likti su netinkama naudoti programa.
• SEO apribojimai: Nors paieškos sistemos vis geriau nuskaito „JavaScript“, serverio atvaizduotas pagrindas vis dar siūlo patikimiausią pagrindą atrandamumui.
• Tinklo delsa: Kiekvienas „JavaScript“ baitas, kiekvienas duomenų gavimas iš kliento priklauso nuo vartotojo tinklo greičio, kuris gali labai skirtis visame pasaulyje.

Čia iš naujo iškyla gerbiamos laipsniško tobulinimo ir sklandaus funkcionalumo mažinimo koncepcijos, ne kaip praeities reliktai, o kaip esminės šiuolaikinės kūrimo strategijos. „React“ serverio komponentai suteikia architektūrinį pagrindą, leidžiantį efektyviai įgyvendinti šias strategijas šiandienos sudėtingose žiniatinklio programose.

Laipsniško tobulinimo supratimas šiuolaikiniame kontekste

Laipsniškas tobulinimas yra dizaino filosofija, kuri propaguoja universalią bazinę patirtį visiems vartotojams, o po to sluoksniuoja pažangesnes funkcijas ir turtingesnę patirtį tiems, kurie turi galingesnes naršykles ir greitesnį ryšį. Tai reiškia kūrimą nuo tvirto, prieinamo pagrindo į išorę.

Pagrindiniai laipsniško tobulinimo principai apima tris atskirus sluoksnius:

1. Turinio sluoksnis (HTML): Tai yra absoliutus pagrindas. Jis turi būti semantiškai turtingas, prieinamas ir teikti pagrindinę informaciją bei funkcionalumą be jokios priklausomybės nuo CSS ar „JavaScript“. Įsivaizduokite paprastą straipsnį, produkto aprašymą ar bazinę formą.
2. Pateikimo sluoksnis (CSS): Kai turinys yra prieinamas, CSS pagerina jo vizualinį patrauklumą ir išdėstymą. Tai pagražina patirtį, daro ją patrauklesnę ir patogesnę vartotojui, tačiau turinys išlieka skaitomas ir funkcionalus net be CSS.
3. Elgsenos sluoksnis („JavaScript“): Tai paskutinis sluoksnis, pridedantis pažangų interaktyvumą, dinamiškus atnaujinimus ir sudėtingas vartotojo sąsajas. Svarbiausia, kad jei „JavaScript“ nepavyksta įkelti ar įvykdyti, vartotojas vis dar turi prieigą prie turinio ir pagrindinio funkcionalumo, kurį teikia HTML ir CSS sluoksniai.

Sklandus funkcionalumo mažinimas, nors dažnai naudojamas kaip laipsniško tobulinimo sinonimas, yra šiek tiek kitoks. Laipsniškas tobulinimas kuriamas nuo paprasto pagrindo. Sklandus funkcionalumo mažinimas prasideda nuo visiškai funkcionalios, patobulintos patirties ir užtikrina, kad jei tam tikros pažangios funkcijos (pvz., „JavaScript“) yra nepasiekiamos, programa gali sklandžiai grįžti prie mažiau sudėtingos, bet vis dar funkcionalios versijos. Abu požiūriai yra papildantys vienas kitą ir dažnai įgyvendinami kartu, siekiant atsparumo ir vartotojų įtraukties.

Šiuolaikinio žiniatinklio kūrimo kontekste, ypač su tokiomis sistemomis kaip „React“, iššūkis buvo išlaikyti šiuos principus neaukojant kūrėjo patirties ar galimybės kurti labai interaktyvias programas. „React“ serverio komponentai sprendžia šią problemą tiesiogiai.

„React“ serverio komponentų (RSC) iškilimas

„React“ serverio komponentai reiškia fundamentalų pokytį, kaip gali būti architektūriškai kuriamos „React“ programos. Pristatyti kaip būdas plačiau panaudoti serverį atvaizdavimui ir duomenų gavimui, RSC leidžia kūrėjams kurti komponentus, kurie veikia išskirtinai serveryje, siunčiant į naršyklę tik gautą HTML ir CSS (ir minimalias kliento pusės instrukcijas).

Pagrindinės RSC savybės:

• Vykdymas serverio pusėje: RSC veikia vieną kartą serveryje, leidžiant tiesioginę prieigą prie duomenų bazės, saugius API iškvietimus ir efektyvias failų sistemos operacijas, neatskleidžiant jautrių prisijungimo duomenų klientui.
• Nulinis komponentų paketo dydis: RSC „JavaScript“ kodas niekada nesiunčiamas klientui. Tai žymiai sumažina kliento pusės „JavaScript“ paketą, todėl atsisiuntimas ir analizė vyksta greičiau.
• Duomenų srautas: RSC gali siųsti savo atvaizduotą išvestį klientui srautu, kai tik duomenys tampa prieinami, leidžiant dalims vartotojo sąsajos pasirodyti palaipsniui, o ne laukti, kol bus įkeltas visas puslapis.
• Jokios kliento pusės būsenos ar efektų: RSC neturi tokių „kabliukų“ (hooks) kaip `useState`, `useEffect` ar `useRef`, nes jie neatvaizduojami iš naujo kliento pusėje ir nevaldo kliento pusės interaktyvumo.
• Integracija su kliento komponentais: RSC savo medyje gali atvaizduoti kliento komponentus (pažymėtus `"use client"`), perduodami jiems savybes (props). Šie kliento komponentai tada yra hidratuojami kliento pusėje, kad taptų interaktyvūs.

Skirtumas tarp serverio komponentų ir kliento komponentų yra esminis:

• Serverio komponentai: Gauna duomenis, atvaizduoja statinį ar dinaminį HTML, veikia serveryje, neturi kliento pusės „JavaScript“ paketo, patys savaime neturi interaktyvumo.
• Kliento komponentai: Tvarko interaktyvumą (paspaudimus, būsenos atnaujinimus, animacijas), veikia kliento pusėje, reikalauja „JavaScript“, yra hidratuojami po pradinio serverio atvaizdavimo.

Pagrindinis RSC pažadas yra dramatiškas našumo pagerinimas (ypač pradinių puslapių įkėlimo metu), sumažintos kliento pusės „JavaScript“ sąnaudos ir aiškesnis atsakomybių atskyrimas tarp serveriui skirtos logikos ir klientui skirto interaktyvumo.

RSC ir laipsniškas tobulinimas: natūrali sinergija

„React“ serverio komponentai iš prigimties atitinka laipsniško tobulinimo principus, suteikdami tvirtą, HTML pagrįstą bazę. Štai kaip:

Kai įkeliama programa, sukurta su RSC, serveris atvaizduoja serverio komponentus į HTML. Šis HTML, kartu su bet kokiu CSS, yra nedelsiant siunčiamas į naršyklę. Šiuo metu, dar prieš įkeliant ar įvykdant bet kokį kliento pusės „JavaScript“, vartotojas mato visiškai suformuotą, skaitomą ir dažnai naviguojamą puslapį. Tai yra laipsniško tobulinimo pagrindas – pagrindinis turinys pateikiamas pirmiausia.

Apsvarstykime tipišką e-komercijos produkto puslapį:

• RSC galėtų gauti produkto informaciją (pavadinimą, aprašymą, kainą, paveikslėlius) tiesiai iš duomenų bazės.
• Tada jis atvaizduotų šią informaciją standartinėmis HTML žymėmis (<h1>, <p>, <img>).
• Svarbiausia, jis taip pat galėtų atvaizduoti <form> su mygtuku „Pridėti į krepšelį“, kuris net ir be „JavaScript“ pateiktų užklausą serverio veiksmui apdoroti užsakymą.

Šis pradinis serverio atvaizduotas HTML paketas yra jūsų programos nepatobulinta versija. Ji greita, draugiška paieškos sistemoms ir prieinama kuo platesnei auditorijai. Žiniatinklio naršyklė gali nedelsiant apdoroti ir parodyti šį HTML, o tai lemia greitą pirmojo turinio atvaizdavimą (FCP) ir solidų didžiausio turinio atvaizdavimą (LCP).

Kai tik kliento pusės „JavaScript“ paketas, skirtas bet kokiems kliento komponentams (pažymėtiems `"use client"`), atsisiunčiamas ir įvykdomas, puslapis „hidratuojasi“. Hidratacijos metu „React“ perima serverio atvaizduotą HTML, priskiria įvykių klausytojus ir atgaivina kliento komponentus, paversdamas juos interaktyviais. Šis sluoksniuotas požiūris užtikrina, kad programa būtų naudojama kiekviename jos įkėlimo etape, įkūnijant laipsniško tobulinimo esmę.

Sklandaus „JavaScript“ funkcionalumo mažinimo įgyvendinimas su RSC

Sklandus funkcionalumo mažinimas RSC kontekste reiškia, kad interaktyvūs kliento komponentai projektuojami taip, kad jei jų „JavaScript“ nepavyktų, pagrindinio serverio komponento HTML vis tiek suteiktų funkcionalią, nors ir mažiau dinamišką, patirtį. Tam reikia apgalvoto planavimo ir serverio bei kliento sąveikos supratimo.

Bazinė patirtis (be „JavaScript“)

Jūsų pagrindinis tikslas su RSC ir laipsnišku tobulinimu yra užtikrinti, kad programa suteiktų prasmingą ir funkcionalią patirtį net tada, kai „JavaScript“ yra išjungtas ar nepavyksta įkelti. Tai reiškia:

• Pagrindinio turinio matomumas: Visas esminis tekstas, vaizdai ir statiniai duomenys turi būti atvaizduoti serverio komponentų į standartinį HTML. Pavyzdžiui, tinklaraščio įrašas turėtų būti visiškai skaitomas.
• Navigacija: Visos vidinės ir išorinės nuorodos turėtų būti standartinės <a> žymės, užtikrinančios, kad navigacija veiktų per pilnus puslapio atnaujinimus, jei kliento pusės maršrutizavimas nėra prieinamas.
• Formų pateikimas: Kritinės formos (pvz., prisijungimo, kontaktų, paieškos, pridėjimo į krepšelį) turi veikti naudojant natūralius HTML <form> elementus su `action` atributu, nukreipiančiu į serverio galinį punktą (pvz., „React Server Action“). Tai užtikrina, kad duomenis galima pateikti net be kliento pusės formų tvarkymo.
• Prieinamumas: Semantinė HTML struktūra užtikrina, kad ekrano skaitytuvai ir kitos pagalbinės technologijos galėtų efektyviai interpretuoti ir naršyti turinį.

Pavyzdys: produktų katalogas
RSC atvaizduoja produktų sąrašą. Kiekvienas produktas turi paveikslėlį, pavadinimą, aprašymą ir kainą. Paprastas mygtukas „Pridėti į krepšelį“ yra standartinis <button>, įdėtas į <form>, kuris pateikia užklausą serverio veiksmui. Be „JavaScript“, paspaudus „Pridėti į krepšelį“ įvyktų pilnas puslapio atnaujinimas, tačiau prekė būtų sėkmingai pridėta. Vartotojas vis tiek gali naršyti ir pirkti.

Patobulinta patirtis („JavaScript“ prieinamas)

Su įjungtu ir įkeltu „JavaScript“, jūsų kliento komponentai sluoksniuoja interaktyvumą ant šio pagrindo. Čia iš tiesų atsiskleidžia šiuolaikinės žiniatinklio programos magija:

• Dinamiškos sąveikos: Aktyvūs tampa filtrai, kurie akimirksniu atnaujina rezultatus, realaus laiko paieškos pasiūlymai, animuotos karuselės, interaktyvūs žemėlapiai ar „tempk ir mesk“ (drag-and-drop) funkcionalumas.
• Kliento pusės maršrutizavimas: Naršymas tarp puslapių be pilnų atnaujinimų, suteikiantis greitesnį, SPA tipo pojūtį.
• Optimistiniai vartotojo sąsajos atnaujinimai: Nedelsiant pateikiamas grįžtamasis ryšys į vartotojo veiksmus dar prieš gaunant serverio atsakymą, pagerinant suvokiamą našumą.
• Sudėtingi valdikliai: Datų parinkikliai, raiškiojo teksto redaktoriai ir kiti sudėtingi vartotojo sąsajos elementai.

Pavyzdys: patobulintas produktų katalogas
Tame pačiame produktų katalogo puslapyje `"use client"` komponentas apgaubia produktų sąrašą ir prideda kliento pusės filtravimą. Dabar, kai vartotojas įveda tekstą į paieškos laukelį arba pasirenka filtrą, rezultatai atnaujinami akimirksniu be puslapio perkrovimo. Mygtukas „Pridėti į krepšelį“ dabar gali inicijuoti API iškvietimą, atnaujinti mini krepšelio perdangą ir pateikti nedelsiantį vizualinį grįžtamąjį ryšį, nenukreipiant iš puslapio.

Projektavimas gedimams (sklandus funkcionalumo mažinimas)

Raktas į sklandų funkcionalumo mažinimą yra užtikrinti, kad patobulintos „JavaScript“ funkcijos nesugadintų pagrindinio funkcionalumo, jei jos sugestų. Tai reiškia atsarginių variantų (fallbacks) kūrimą.

• Formos: Jei turite kliento pusės formos tvarkyklę, kuri atlieka AJAX pateikimus, įsitikinkite, kad pagrindinė <form> vis dar turi galiojančius `action` ir `method` atributus. Jei „JavaScript“ sugenda, forma grįš prie tradicinio pilno puslapio pateikimo, bet vis tiek veiks.
• Navigacija: Nors kliento pusės maršrutizavimas siūlo greitį, visa navigacija turėtų iš esmės remtis standartinėmis <a> žymėmis. Jei kliento pusės maršrutizavimas sugenda, naršyklė atliks pilną puslapio navigaciją, leisdama vartotojui judėti toliau.
• Interaktyvūs elementai: Elementams, tokiems kaip akordeonai ar skirtukai, užtikrinkite, kad turinys vis dar būtų prieinamas (pvz., visos sekcijos matomos arba atskiri puslapiai kiekvienam skirtukui) be „JavaScript“. Tada „JavaScript“ laipsniškai patobulina juos į interaktyvius perjungiklius.

Šis sluoksniavimas užtikrina, kad vartotojo patirtis prasideda nuo pačios fundamentaliausios, tvirčiausios pakopos (HTML iš RSC) ir palaipsniui prideda patobulinimus (CSS, tada kliento komponentų interaktyvumą). Jei bet kuris patobulinimo sluoksnis sugenda, vartotojas sklandžiai grąžinamas į ankstesnį, veikiantį sluoksnį, niekada nesusiduriant su visiškai neveikiančia patirtimi.

Praktinės strategijos kuriant atsparias RSC programas

Norėdami efektyviai įgyvendinti laipsnišką tobulinimą ir sklandų funkcionalumo mažinimą su „React“ serverio komponentais, apsvarstykite šias strategijas:

Teikite pirmenybę semantiniam HTML iš RSC

Visada pradėkite užtikrindami, kad jūsų serverio komponentai atvaizduotų pilną, semantiškai teisingą HTML struktūrą. Tai reiškia naudoti tinkamas žymes, tokias kaip <header>, <nav>, <main>, <section>, <article>, <form>, <button>, ir <a>. Šis pagrindas yra iš prigimties prieinamas ir tvirtas.

Atsakingai sluoksniuokite interaktyvumą su `"use client"`

Tiksliai nustatykite, kur kliento pusės interaktyvumas yra absoliučiai būtinas. Nežymėkite komponento kaip `"use client"`, jei jis tik rodo duomenis ar nuorodas. Kuo daugiau galite išlaikyti kaip serverio komponentus, tuo mažesnis bus jūsų kliento pusės paketas ir tvirtesnis jūsų programos pagrindas.

Pavyzdžiui, statinis navigacijos meniu gali būti RSC. Paieškos juosta, kuri dinamiškai filtruoja rezultatus, gali turėti kliento komponentą įvesties laukui ir kliento pusės filtravimo logikai, tačiau pradiniai paieškos rezultatai ir pati forma yra atvaizduojami serveryje.

Serverio pusės atsarginiai variantai kliento pusės funkcijoms

Kiekvienas kritinis vartotojo veiksmas, patobulintas „JavaScript“, turėtų turėti veikiantį serverio pusės atsarginį variantą.

• Formos: Jei forma turi kliento pusės `onSubmit` tvarkyklę AJAX pateikimui, užtikrinkite, kad <form> taip pat turėtų galiojantį `action` atributą, nukreipiantį į serverio galinį punktą (pvz., „React Server Action“ arba tradicinį API maršrutą). Jei „JavaScript“ nepasiekiamas, naršyklė grįš prie standartinio formos POST pateikimo.
• Navigacija: Kliento pusės maršrutizavimo sistemos, tokios kaip `next/link` „Next.js“, yra sukurtos ant standartinių <a> žymių. Užtikrinkite, kad šios <a> žymės visada turėtų galiojantį `href` atributą.
• Paieška ir filtravimas: RSC gali atvaizduoti formą, kuri pateikia paieškos užklausas serveriui, atlikdama pilną puslapio atnaujinimą su naujais rezultatais. Kliento komponentas gali tai patobulinti su momentiniais paieškos pasiūlymais ar kliento pusės filtravimu.

Naudokite „React Server Actions“ mutacijoms

„React Server Actions“ yra galinga funkcija, leidžianti apibrėžti funkcijas, kurios saugiai veikia serveryje, tiesiogiai jūsų serverio komponentuose ar net iš kliento komponentų. Jos idealiai tinka formų pateikimui ir duomenų mutacijoms. Svarbiausia, jos sklandžiai integruojasi su HTML formomis, veikdamos kaip puikus serverio pusės atsarginis variantas `action` atributams.

// app/components/AddToCartButton.js (Serverio komponentas)
export async function addItemToCart(formData) {
  'use server'; // Pažymi šią funkciją kaip serverio veiksmą (Server Action)
  const productId = formData.get('productId');
  // ... Logika, skirta pridėti prekę į duomenų bazę / seansą ...
  console.log(`Added product ${productId} to cart on server.`);
  // Pasirinktinai iš naujo patvirtinti duomenis arba nukreipti
}

export default function AddToCartButton({ productId }) {
  return (
    <form action={addItemToCart}>
      <input type="hidden" name="productId" value={productId} />
      <button type="submit">Add to Cart</button>
    </form>
  );
}

Šiame pavyzdyje, jei „JavaScript“ išjungtas, paspaudus mygtuką, forma bus pateikta `addItemToCart` serverio veiksmui. Jei „JavaScript“ įjungtas, „React“ gali perimti šį pateikimą, pateikti kliento pusės grįžtamąjį ryšį ir įvykdyti serverio veiksmą be pilno puslapio atnaujinimo.

Apsvarstykite klaidų ribas (Error Boundaries) kliento komponentams

Nors RSC yra tvirti iš prigimties (nes jie veikia serveryje), kliento komponentai vis tiek gali susidurti su „JavaScript“ klaidomis. Įdiekite „React“ klaidų ribas aplink savo kliento komponentus, kad sklandžiai pagautumėte ir parodytumėte atsarginę vartotojo sąsają, jei įvyktų kliento pusės klaida, užkertant kelią visos programos žlugimui. Tai yra sklandaus funkcionalumo mažinimo forma kliento pusės „JavaScript“ sluoksnyje.

Testavimas įvairiomis sąlygomis

Kruopščiai testuokite savo programą su išjungtu „JavaScript“. Naudokite naršyklės kūrėjo įrankius blokuoti „JavaScript“ arba įdiekite plėtinius, kurie jį išjungia globaliai. Testuokite įvairiuose įrenginiuose ir esant skirtingam tinklo greičiui, kad suprastumėte tikrąją bazinę patirtį. Tai yra labai svarbu norint užtikrinti, kad jūsų sklandaus funkcionalumo mažinimo strategijos būtų efektyvios.

Kodų pavyzdžiai ir šablonai

1 pavyzdys: paieškos komponentas su sklandžiu funkcionalumo mažinimu

Įsivaizduokite paieškos juostą pasaulinėje e-komercijos svetainėje. Vartotojai tikisi momentinio filtravimo, bet jei JS sugenda, paieška vis tiek turėtų veikti.

Serverio komponentas (`app/components/SearchPage.js`)

// Tai yra serverio komponentas (Server Component), jis veikia serveryje.
import { performServerSearch } from '../lib/data';
import SearchInputClient from './SearchInputClient'; // Kliento komponentas (Client Component)

export default async function SearchPage({ searchParams }) {
  const query = searchParams.query || '';
  const results = await performServerSearch(query); // Tiesioginis duomenų gavimas serverio pusėje

  return (
    <div>
      <h1>Product Search</h1>
      
      {/* Bazinė forma: veikia su „JavaScript“ arba be jo */}
      <form action="/search" method="GET" className="mb-4">
        <SearchInputClient initialQuery={query} /> {/* Kliento komponentas patobulintai įvesties laukui */}
        <button type="submit" className="ml-2 p-2 bg-blue-500 text-white rounded">Search</button>
      </form>

      <h2>Results for "{query}"</h2>
      {results.length === 0 ? (
        <p>No products found.</p>
      ) : (
        <ul className="list-disc pl-5">
          {results.map((product) => (
            <li key={product.id}>
              <h3>{product.name}</h3>
              <p>{product.description}</p>
              <p><strong>Price: </strong>{product.price.toLocaleString('en-US', { style: 'currency', currency: product.currency })}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Kliento komponentas (`app/components/SearchInputClient.js`)

'use client'; // Tai yra kliento komponentas (Client Component)

import { useState } from 'react';
import { useRouter } from 'next/navigation'; // Daroma prielaida, kad naudojamas Next.js App Router

export default function SearchInputClient({ initialQuery }) {
  const [searchQuery, setSearchQuery] = useState(initialQuery);
  const router = useRouter();

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
  };

  const handleInstantSearch = (e) => {
    // Išvengiama numatytojo formos pateikimo, jei JS įjungtas
    e.preventDefault();
    // Naudojamas kliento pusės maršrutizavimas, siekiant atnaujinti URL ir iš naujo atvaizduoti serverio komponentą (be pilno puslapio perkrovimo)
    router.push(`/search?query=${searchQuery}`);
  };

  return (
    <input
      type="search"
      name="query" // Svarbu formos pateikimui serverio pusėje
      value={searchQuery}
      onChange={handleInputChange}
      onKeyUp={handleInstantSearch} // Arba su delsa (debounce) realaus laiko pasiūlymams
      placeholder="Search products..."
      className="border p-2 rounded w-64"
    />
  );
}

Paaiškinimas:

• `SearchPage` (RSC) gauna pradinius rezultatus pagal URL `searchParams`. Ji atvaizduoja `form` su `action="/search"` ir `method="GET"`. Tai yra atsarginis variantas.
• `SearchInputClient` (Kliento komponentas) suteikia interaktyvų įvesties lauką. Su įjungtu „JavaScript“, `handleInstantSearch` (arba delsinė versija) atnaujina URL naudodama `router.push`, kas inicijuoja švelnią navigaciją ir iš naujo atvaizduoja `SearchPage` RSC be pilno puslapio perkrovimo, suteikiant momentinius rezultatus.
• Jei „JavaScript“ išjungtas, `SearchInputClient` komponentas nebus hidratuotas. Vartotojas vis tiek gali įvesti tekstą į `<input type="search">` ir paspausti mygtuką „Search“. Tai sukels pilną puslapio atnaujinimą, pateikiant formą į `/search?query=...`, ir `SearchPage` RSC atvaizduos rezultatus. Patirtis nėra tokia sklandi, bet ji yra visiškai funkcionali.

2 pavyzdys: pirkinių krepšelio mygtukas su patobulintu grįžtamuoju ryšiu

Pasauliniu mastu prieinamas mygtukas „Pridėti į krepšelį“ turėtų veikti visada.

Serverio komponentas (`app/components/ProductCard.js`)

// Serverio veiksmas (Server Action) prekės pridėjimui į krepšelį tvarkyti
async function addToCartAction(formData) {
  'use server';
  const productId = formData.get('productId');
  const quantity = parseInt(formData.get('quantity') || '1', 10);
  // Imituojama duomenų bazės operacija
  console.log(`Server: Adding ${quantity} of product ${productId} to cart.`);
  // Tikroje programoje: atnaujinti duomenų bazę, seansą ir t. t.
  // await db.cart.add({ userId: currentUser.id, productId, quantity });
  // Pasirinktinai iš naujo patvirtinti kelią (path) arba nukreipti
  // revalidatePath('/cart');
  // redirect('/cart');
}

// Serverio komponentas (Server Component) produkto kortelei
export default function ProductCard({ product }) {
  return (
    <div className="border p-4 rounded shadow">
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      <p><strong>Price:</strong> {product.price.toLocaleString('en-US', { style: 'currency', currency: product.currency })}</p>
      
      {/* Mygtukas „Pridėti į krepšelį“, naudojantis serverio veiksmą (Server Action) kaip atsarginį variantą */}
      <form action={addToCartAction}>
        <input type="hidden" name="productId" value={product.id} />
        <button type="submit" className="bg-green-500 text-white p-2 rounded mt-2">
          Add to Cart (Server Fallback)
        </button>
      </form>

      {/* Kliento komponentas patobulintai pridėjimo į krepšelį patirčiai (pasirinktinai) */}
      <AddToCartClientButton productId={product.id} />
    </div>
  );
}

Kliento komponentas (`app/components/AddToCartClientButton.js`)

'use client';

import { useState } from 'react';
// Importuojamas serverio veiksmas (server action), nes kliento komponentai taip pat gali juos iškviesti
import { addToCartAction } from './ProductCard'; 

export default function AddToCartClientButton({ productId }) {
  const [isAdding, setIsAdding] = useState(false);
  const [feedback, setFeedback] = useState('');

  const handleAddToCart = async () => {
    setIsAdding(true);
    setFeedback('Adding...');

    const formData = new FormData();
    formData.append('productId', productId);
    formData.append('quantity', '1'); // Kiekio pavyzdys

    try {
      await addToCartAction(formData); // Tiesiogiai iškviečiamas serverio veiksmas (server action)
      setFeedback('Added to cart!');
      // Tikroje programoje: atnaujinti vietinę krepšelio būseną, rodyti mini krepšelį ir t. t.
    } catch (error) {
      console.error('Failed to add to cart:', error);
      setFeedback('Failed to add. Please try again.');
    } finally {
      setIsAdding(false);
      setTimeout(() => setFeedback(''), 2000); // Išvalyti atsaką po tam tikro laiko
    }
  };

  return (
    <div>
      <button 
        onClick={handleAddToCart} 
        disabled={isAdding}
        className="bg-blue-500 text-white p-2 rounded mt-2 ml-2"
      >
        {isAdding ? 'Adding...' : 'Add to Cart (Enhanced)'}
      </button>
      {feedback && <p className="text-sm mt-1">{feedback}</p>}
    </div>
  );
}

Paaiškinimas:

• `ProductCard` (RSC) apima paprastą `<form>`, kuri naudoja `addToCartAction` serverio veiksmą. Ši forma puikiai veikia be „JavaScript“, sukeldama pilną puslapio pateikimą, kuris prideda prekę į krepšelį.
• `AddToCartClientButton` (Kliento komponentas) prideda patobulintą patirtį. Su įjungtu „JavaScript“, paspaudus šį mygtuką, suveikia `handleAddToCart`, kuris tiesiogiai iškviečia tą patį `addToCartAction` (be pilno puslapio atnaujinimo), rodo nedelsiantį grįžtamąjį ryšį (pvz., „Adding...“) ir optimistiškai atnaujina vartotojo sąsają.
• Jei „JavaScript“ išjungtas, `AddToCartClientButton` nebus atvaizduotas ar hidratuotas. Vartotojas vis tiek gali naudoti pagrindinę `<form>` iš serverio komponento, kad pridėtų prekes į savo krepšelį, demonstruodamas sklandų funkcionalumo mažinimą.

Šio požiūrio privalumai (globali perspektyva)

RSC taikymas laipsniškam tobulinimui ir sklandžiam funkcionalumo mažinimui suteikia didelių pranašumų, ypač pasaulinei auditorijai:

• Universalus prieinamumas: Suteikdami tvirtą HTML pagrindą, jūsų programa tampa prieinama vartotojams su senesnėmis naršyklėmis, pagalbinėmis technologijomis ar tiems, kurie naršo sąmoningai išjungę „JavaScript“. Tai žymiai išplečia jūsų potencialią vartotojų bazę įvairiose demografinėse grupėse ir regionuose.
• Aukštesnis našumas: Sumažinus kliento pusės „JavaScript“ paketą ir perkėlus atvaizdavimą į serverį, pasiekiami greitesni pradiniai puslapių įkėlimai, pagerinti pagrindiniai žiniatinklio rodikliai (pvz., LCP ir FID) ir greitesnė vartotojo patirtis. Tai ypač svarbu vartotojams su lėtesniais tinklais ar mažiau galingais įrenginiais, kurie yra paplitę daugelyje besivystančių rinkų.
• Padidintas atsparumas: Jūsų programa išlieka naudojama net esant nepalankioms sąlygoms, tokioms kaip protarpinis tinklo ryšys, „JavaScript“ klaidos ar kliento pusės scenarijų blokatoriai. Vartotojai niekada nepaliekami su tuščiu ar visiškai neveikiančiu puslapiu, o tai skatina pasitikėjimą ir mažina nusivylimą.
• Pagerintas SEO: Paieškos sistemos gali patikimai nuskaityti ir indeksuoti serveryje atvaizduotą HTML turinį, užtikrindamos geresnį jūsų programos turinio atrandamumą ir reitingavimą.
• Išlaidų efektyvumas vartotojams: Mažesni „JavaScript“ paketai reiškia mažesnį duomenų perdavimą, o tai gali būti apčiuopiamas išlaidų taupymas vartotojams su limituotais duomenų planais arba regionuose, kur duomenys yra brangūs.
• Aiškus atsakomybių atskyrimas: RSC skatina švaresnę architektūrą, kurioje serverio pusės logika (duomenų gavimas, verslo logika) yra atskirta nuo kliento pusės interaktyvumo (vartotojo sąsajos efektai, būsenos valdymas). Tai gali lemti lengviau prižiūrimus ir plečiamus kodus, kas naudinga paskirstytoms kūrėjų komandoms skirtingose laiko juostose.
• Masto didinimas: Perduodant CPU reikalaujančias atvaizdavimo užduotis serveriui, galima sumažinti skaičiavimo naštą kliento įrenginiams, todėl programa veikia geriau platesniame aparatinės įrangos spektre.

Iššūkiai ir svarstymai

Nors nauda yra įtikinama, RSC ir šio laipsniško tobulinimo požiūrio priėmimas kelia savų iššūkių:

• Mokymosi kreivė: Kūrėjams, įpratusiems prie tradicinio kliento pusės „React“ kūrimo, reikės suprasti naujas paradigmas, skirtumą tarp serverio ir kliento komponentų bei kaip tvarkomas duomenų gavimas ir mutacijos.
• Būsenos valdymo sudėtingumas: Sprendimas, ar būsena priklauso serveriui (per URL parametrus, slapukus ar serverio veiksmus), ar klientui, gali sukelti pradinį sudėtingumą. Reikalingas kruopštus planavimas.
• Padidėjusi serverio apkrova: Nors RSC sumažina kliento darbą, jie perkelia daugiau atvaizdavimo ir duomenų gavimo užduočių į serverį. Tinkama serverio infrastruktūra ir mastelio didinimas tampa dar svarbesni.
• Kūrimo eigos koregavimai: Komponentų kūrimo mentalinis modelis turi prisitaikyti. Kūrėjai turi galvoti „pirmiausia serveris“ turiniui ir „paskiausia klientas“ interaktyvumui.
• Testavimo scenarijai: Reikės išplėsti savo testavimo matricą, įtraukiant scenarijus su ir be „JavaScript“, skirtingas tinklo sąlygas ir įvairias naršyklės aplinkas.
• Paketavimo ir hidratacijos ribos: Apibrėžiant, kur yra `"use client"` ribos, reikia atidžiai apsvarstyti, siekiant sumažinti kliento pusės „JavaScript“ ir optimizuoti hidrataciją. Per didelė hidratacija gali panaikinti kai kuriuos našumo privalumus.

Geriausios praktikos progresyviai RSC patirčiai

Norėdami maksimaliai išnaudoti laipsniško tobulinimo ir sklandaus funkcionalumo mažinimo privalumus su RSC, laikykitės šių geriausių praktikų:

1. Projektuokite „be JS“ pirmiausia: Kuriant naują funkciją, pirmiausia įsivaizduokite, kaip ji veiktų tik su HTML ir CSS. Įgyvendinkite šį pagrindą naudodami serverio komponentus. Tada palaipsniui pridėkite „JavaScript“ patobulinimams.
2. Sumažinkite kliento pusės „JavaScript“: Naudokite `"use client"` tik tiems komponentams, kuriems tikrai reikalingas interaktyvumas, būsenos valdymas ar naršyklei būdingi API. Laikykite savo kliento komponentų medžius kuo mažesnius ir seklesnius.
3. Naudokite serverio veiksmus mutacijoms: Pasinaudokite serverio veiksmais visoms duomenų mutacijoms (formų pateikimui, atnaujinimams, trynimams). Jie suteikia tiesioginį, saugų ir našų būdą sąveikauti su jūsų vidine sistema (backend), su integruotais atsarginiais variantais „be JS“ scenarijams.
4. Strateginė hidratacija: Atidžiai stebėkite, kada ir kur vyksta hidratacija. Venkite nereikalingos didelių vartotojo sąsajos dalių hidratacijos, jei joms nereikia interaktyvumo. Įrankiai ir sistemos, sukurtos ant RSC (pvz., Next.js App Router), dažnai tai optimizuoja automatiškai, tačiau suprasti pagrindinį mechanizmą yra naudinga.
5. Teikite pirmenybę pagrindiniams žiniatinklio rodikliams: Nuolat stebėkite savo programos pagrindinius žiniatinklio rodiklius (LCP, FID, CLS) naudodami tokius įrankius kaip „Lighthouse“ ar „WebPageTest“. RSC yra sukurti pagerinti šiuos rodiklius, tačiau teisingas įgyvendinimas yra raktas į sėkmę.
6. Pateikite aiškų vartotojo grįžtamąjį ryšį: Kai kliento pusės patobulinimas įkeliamas ar sugenda, užtikrinkite, kad vartotojas gautų aiškų, netrikdantį grįžtamąjį ryšį. Tai gali būti įkėlimo indikatorius, pranešimas arba tiesiog leidimas sklandžiai perimti serverio pusės atsarginiam variantui.
7. Švieskite savo komandą: Užtikrinkite, kad visi jūsų komandos kūrėjai suprastų skirtumą tarp serverio ir kliento komponentų bei laipsniško tobulinimo principus. Tai skatina nuoseklų ir tvirtą kūrimo požiūrį.

Žiniatinklio kūrimo ateitis su RSC ir laipsnišku tobulinimu

„React“ serverio komponentai reiškia daugiau nei tik dar vieną funkciją; jie yra fundamentalus persvarstymas, kaip gali būti kuriamos šiuolaikinės žiniatinklio programos. Jie žymi grįžimą prie serverio pusės atvaizdavimo stiprybių – našumo, SEO, saugumo ir universalaus prieinamumo – neatsisakant mylimos „React“ kūrėjo patirties ir komponentų modelio.

Ši paradigmos kaita skatina kūrėjus kurti programas, kurios yra iš prigimties atsparesnės ir orientuotos į vartotoją. Ji verčia mus atsižvelgti į įvairias sąlygas, kuriomis pasiekiamos mūsų programos, pereinant nuo „JavaScript arba nieko“ mentaliteto prie labiau įtraukiančio, sluoksniuoto požiūrio. Kadangi žiniatinklis toliau plečiasi visame pasaulyje, atsirandant naujiems įrenginiams, įvairioms tinklo infrastruktūroms ir besikeičiantiems vartotojų lūkesčiams, RSC palaikomi principai tampa vis svarbesni.

RSC derinys su gerai apgalvota laipsniško tobulinimo strategija suteikia kūrėjams galią kurti programas, kurios yra ne tik žaibiškai greitos ir turtingos funkcijomis pažengusiems vartotojams, bet ir patikimai funkcionalios bei prieinamos visiems kitiems. Tai reiškia kūrimą visam žmogiškųjų ir technologinių sąlygų spektrui, o ne tik idealiam atvejui.

Išvada: kuriame atsparų, našų žiniatinklį

Kelionė link tikrai globalaus ir atsparaus žiniatinklio kūrimo reikalauja įsipareigojimo tokiems fundamentaliems principams kaip laipsniškas tobulinimas ir sklandus funkcionalumo mažinimas. „React“ serverio komponentai siūlo galingą, modernų įrankių rinkinį šiems tikslams pasiekti „React“ ekosistemoje.

Teikdami pirmenybę tvirtam HTML pagrindui iš serverio komponentų, atsakingai sluoksniuodami interaktyvumą su kliento komponentais ir kurdami tvirtus serverio pusės atsarginius variantus kritiniams veiksmams, kūrėjai gali sukurti programas, kurios yra:

• Greitesnės: Sumažintas kliento pusės „JavaScript“ reiškia greitesnius pradinius įkėlimus.
• Prieinamesnės: Funkcionali patirtis visiems vartotojams, nepriklausomai nuo jų kliento pusės galimybių.
• Labai atsparios: Programos, kurios sklandžiai prisitaiko prie kintančių tinklo sąlygų ir galimų „JavaScript“ gedimų.
• Draugiškos SEO: Patikimas turinio atrandamumas paieškos sistemoms.

Priimti šį požiūrį reiškia ne tik optimizuoti našumą; tai reiškia kurti įtraukčiai, užtikrinant, kad kiekvienas vartotojas, iš bet kurio pasaulio kampelio, bet kuriuo įrenginiu, galėtų pasiekti ir prasmingai sąveikauti su mūsų kuriamomis skaitmeninėmis patirtimis. Žiniatinklio kūrimo ateitis su „React“ serverio komponentais rodo tvirtesnį, teisingesnį ir galiausiai sėkmingesnį žiniatinklį visiems.